<template>
  <div>
    <div v-if="loadSta">
      <div class="swiper-box">
        <swiper :options="bannerOption">
          <swiper-slide v-for="(item, index) in banner" :key="index">
            <div class="swiper-item" v-for="(item, ind) in banner" :key="ind">
              <img :src="apiUrl + item.imageUrl" alt="">
            </div>
          </swiper-slide>
        </swiper>
      </div>
      <div class="block flex-center tab-content">
        <div class="flex-col tab-item">
          <div class="icon"><span><i class="fa fa-heart"></i></span></div>
          <div class="txt">收藏</div>
        </div>
        <div class="flex-col tab-item">
          <div class="icon"><span><i class="fa fa-plane"></i></span></div>
          <div class="txt">物流</div>
        </div>
        <div class="flex-col tab-item">
          <div class="icon"><span><i class="fa fa-list-ul"></i></span></div>
          <div class="txt">分类</div>
        </div>
        <div class="flex-col tab-item">
          <div class="icon"><span><i class="fa fa-money"></i></span></div>
          <div class="txt">红包</div>
        </div>
      </div>
      <div class="block recommend-goods">
        <div class="title">推荐商品 <div><i class="fa fa-angle-down"></i></div></div>
        <div class="recommend-list">
          <swiper :options="swiperOption">
            <swiper-slide v-for="(slide, index) in swiperSlides" :key="index">
              <div class="slide-box">
                <div class="img-box">
                  <img :src="apiUrl + slide.imageUrl" alt="">
                </div>
                <div class="slide-title">{{ slide.subtitle }}</div>
                <div class="price">&yen; <span>{{ slide.id }}</span></div>
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
      <div class="block recommend-cate">
        <div class="flex-center cate-item" v-for="(item, ind) in article" :key="ind">
          <div class="flex-center cate-mask">
            <div class="cate-info">
              <div class="title">{{ item.articleTitle }}</div>
            </div>
          </div>
          <img :src="apiUrl + item.articleLogo" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
require('swiper/dist/css/swiper.css')
import Vue from 'vue'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { Indicator } from 'mint-ui';
import { Toast } from 'mint-ui';
import { InfiniteScroll } from 'mint-ui';
Vue.use(InfiniteScroll);
import axios from 'axios'

export default {
  components: {
    swiper,
    swiperSlide
  },
  data () {
    return {
      loadSta: false,
      apiUrl: '',
      banner: [],
      swiperOption: {
        pagination : '.swiper-pagination',
        slidesPerView: 3,
        loop: true,
        spaceBetween: 12
      },
      bannerOption: {
        autoplay: 1000,
        pagination : '.swiper-pagination',
        loop: true,
      },
      swiperSlides: [1, 2, 3, 4, 5],
      article: []
    }
  },
  mounted () {
    this.init();
  },
  methods: {
    getId (arr) {
      for(var i = 0; i < arr.length; i++) {
        arr[i].id = parseInt(arr[i].appLink.split("goodsId=")[1]);
      }
      return arr;
    },
    init () {
      Indicator.open({spinnerType: 'fading-circle'});
      let me = this;
      this.axiosReq().get(me.baseUrl() + "/index/index").then(function (res) {
        me.loadSta = true;
        me.banner = res.data.dataList.ad13;
        me.swiperSlides = me.getId(res.data.dataList.ad14);
        me.article = res.data.dataList.article;
        me.apiUrl = res.data.apiUrl;
        Indicator.close();
      })
      .catch(function (error) {
        Toast('页面加载失败');
        Indicator.close();
      });
    }
  }
}
</script>

<style scoped lang="less">
  @import url('../../../static/var');

  .swiper-box {
    width: 100%;
    height: 11rem;
    overflow: hidden;
    .swiper-item {
      img {
        width: 100%;
      }
    }
  }
  .tab-content {
    text-align: center;
    padding: 15px 0;
    margin-bottom: 10px;
    .tab-item {
      span {
        width: 45px;
        height: 45px;
        border-radius: 15px;
        display: inline-block;
        i {
          padding-top: 12px;
          font-size: 22px;
          color: #fff;
        }
      }
      .txt {
        padding-top: 5px;
      }
      &:nth-child(1) span {
        background-color: #F83166;
      }
      &:nth-child(2) span {
        background-color: #03C381;
      }
      &:nth-child(3) span {
        background-color: #FE3835;
      }
      &:nth-child(4) span {
        background-color: #D03D36;
      }
    }
  }
  .recommend-goods {
    overflow: hidden;
    margin-bottom: 10px;
    .title {
      color: #999;
      padding: 5px 0;
      text-align: center;
      border-bottom: 1px solid #eee;
    }
    .recommend-list {
      .swiper-container {
        padding: 15px 10px 10px;
        height: auto;
        overflow: hidden;
        color: @col-666;
      }
      .slide-box {
        text-align: center;
      }
      .img-box {
        padding: 50%;
        background-color: #eee;
        overflow: hidden;
        position: relative;
        img {
          position: absolute;
          top: 0;
          right: 0;
          bottom: auto;
          left: 0;
          width: 100%;
          height: auto;
        }
      }
      .slide-title {
        .breakTxt();
      }
      .price {
        padding-top: 3px;
        span {
          color: @col-orange;
        }
      }
    }
  }
  .recommend-cate {
    .cate-item {
      width: 100%;
      min-height: 4rem;
      height: auto;
      max-height: 10rem;
      position: relative;
      overflow: hidden;
      margin-bottom: 10px;
      img {
        width: 100%;
        height: auto;
      }
    }
    .cate-mask {
      .position(absolute, auto, 0, -5px, 0);
      .box(100%, 40px);
      background:-moz-linear-gradient(top,rgba(255,255,255,0),rgba(0,0,0,.5));/*Mozilla*/
      background:-webkit-gradient(linear,0 100%,from(rgba(255,255,255,0)),to(rgba(0,0,0,.5)));/*Old gradient for webkit*/
      background:-webkit-linear-gradient(top,rgba(255,255,255,0),rgba(0,0,0,.5));/*new gradient for Webkit*/
      text-align: center;
      color: @bg-col-fff;
      .title {
        font-size: @f14;
      }
      .sub-title {
        font-size: @f12;
        padding-top: 5px;
      }
      .btn {
        padding-top: 10px;
        button {
          background-color: transparent;
          border: 1px solid @bg-col-fff;
          color: @bg-col-fff;
          font-size: @f12;
          &.mint-button--small {
            height: 24px;
            border-radius: 0;
          }
        }
      }
    }
  }
</style>